<template>
	<view>
		<view class="headinfo">
			<!-- style="border-radius: 0 0 300upx 300upx/0 0 36upx 36upx;" -->
			<!-- <view class="userinfo">
				<view class="cont webkit">
					<image class="face" :src="res.avatar || '/static/missing-face.png'"></image>
					<view class="info">
						<view style="width: 400upx; color: #FFFFFF;">
							<text style="display: inline-block;font-size: 36upx;">{{res.nick_name}}</text>
							<text style="display: inline-block;padding-left: 30upx;">{{res.dengji}}</text>
						</view>
						<view class="text" style="position: absolute; line-height: 50upx;overflow: hidden;">
							邀请码: {{res.yaoqingma}}
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- 滚动选择区 -->
		<view>
			<view class="uni-tab-bar">
				<scroll-view scroll-x class="uni-swiper-tab" style="padding-bottom: 28upx;">
					<block v-for="(tabBar,index) in tabBars" :key="index">
							<view class="swiper-tab-list" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
								<view class="swiper-tab-line">
									<view style="font-size: 34upx;">
										{{tabBar.name}}
									</view>
									<view style="font-size: 22upx;">
										({{tabBar.number == '' ? 0 :tabBar.number }})
									</view>
									
								</view>
							</view>
					</block>
				</scroll-view>
			</view>
			<!--内容区-->
			<view class="contentindex" style="">
				<swiper :current="tabIndex" @change="tabChange" class="addheight">
					<swiper-item v-for="(content,index) in contentList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
						
						<view class="swiper-item" v-for="(res,index) in contentList[index].data" :key="index" style="border-bottom: 2upx solid #eeeeee;">
							<view class="imgclass" style="">
								<image :src="res.avatar || '/static/missing-face.png'" style="margin-left: 38upx;"></image>
								<!-- <view style="text-align: center;">
									<text style="font-size: 20upx;padding: 0 10upx;border-radius: 5upx;background-color: #C6E8FA;">{{res.level_name}}</text>
								</view> -->
							</view>
							<view class="info">
								<view class="info" style="font-size: 32upx;">
									<image src="/static/jingdiananli_kongwujiaoxing_shoucang.png" style="width: 33upx;height: 33upx;margin-right: 10upx;margin-top: 5upx;"></image>
									{{res.nickname}}
								</view>
								<view class="time" v-cloak>邀请码 : {{res.id}}</view>
								<view class="time">
									<!-- <text style="width: 340upx;display: inline-block;">收入 : {{res.lzsr}}</text> -->
									<text style="">电话:{{res.mobile}}</text> </view>
							</view>
						</view>
						
						
					</swiper-item>
				</swiper>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				res: [],
				openid: '',
				active: 'active',
				number:'',
				tabCurrentIndex: 0,
				tabIndex: 0,	//选中标签栏的序列
				tabBars:[
					{
						name: '铁杆粉丝',
						id: '0',
						number:'',
					},
					{
						name: '忠实粉丝',
						id: '1',
						number:'',
					}
				],
				contentList: [
					// 第一栏数据
					{
						data:[]
					},
					// 第二栏数据
					{
						data:[]
					}
				],
			};
		},
		onLoad:function(){
			// 页面显示是默认选中第一个
			this.tabCurrentIndex = 0;
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../login/login'
					});
				}
			});
		},
		methods:{
			setAjax(){
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=commission.down.get_list&app=1',
					method: 'POST',
					data: {'openid': this.openid, level: 1},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res.data.result.list)
						this.tabBars[0].number = res.data.result.total
						this.contentList[0].data = res.data.result.list
					},
					fail: () => {},
					complete: () => {}
				});
				
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=commission.down.get_list&app=1',
					method: 'POST',
					data: {'openid': this.openid, level: 2},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						this.tabBars[1].number = res.data.result.total
						this.contentList[1].data = res.data.result.list
					},
					fail: () => {},
					complete: () => {}
				});
				uni.hideLoading()
			},
			toggleTab(index){
				this.tabIndex = index
			},
			//滑动切换swiper
			tabChange(e){
				const tabIndex = e.detail.current
				this.tabIndex = tabIndex
				
			},
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
		}
	}
</script>

<style>
.all {
	height: 100%;
	background-color: #eee;
}
.addheight {
	height: 1200upx;
}
/* 内容区 */
.contentindex {
	height: 100%;
	background-color: #fff;
}
.info {
	margin-top: 6upx;
}
/* 写死高度5000,应该没有那么多的团队成员 */
.nav-item {
	overflow: scroll;
	/* height: 5000upx!important; */
}
.swiper-item {
	margin-top: 10upx;
}
.time {
	margin-left: 10upx;
	font-size: 23upx;
	color: #999;
}
.swiper-item {
	display: flex;
	/* height: 160upx; */
	background-color: #fff;
}
.swiper-item .imgclass{
	flex: 1;
}
.swiper-item .imgclass image {
	margin-top: 15upx;
	margin-left: 15upx;
	width: 80upx;
	height: 80upx;
	border-radius: 40upx;
}
.swiper-item .info{
	flex: 4;
}
.uni-swiper-tab{
	border-bottom: 2upx solid #eeeeee;
}
.swiper-tab-list{
	width: 50%;
	height: 100%;
	color: #000;
	font-weight: bold;
}
.imgclass {
	width: 100upx;
	height: 100upx;
	border-radius: 50upx;
}
.uni-tab-bar .active{
	color: rgb(170, 170, 255);
	border-bottom: 4upx solid rgb(170, 170, 255);
}
.uni-tab-bar {
	background-color: #fff;
	margin-top: 10upx;
}
.active .swiper-tab-line{
	color: rgb(170, 170, 255);
	width: 70upx;
	margin: auto;
	margin-bottom: 25upx;
	
}

</style>

<style>

.num,.yuan{margin-left: 20upx;margin-right: 20upx;}
.num {
	font-size: 40upx;
	color: #ff8000;
}
.nowget {
	display: flex;
}
.linetotle .yuan {
	font-size: 29upx;
	border-bottom: 1px solid #ccc;
	height: 35px;
}
.linetotle_left {
	flex: 60%;
}
.linetotle_left .yuan {
	border-bottom: none;
}
.linetotle_right {
	flex: 20%;
}
.external {
	height: 280upx;
	background-color: #fff;
	display: flex;
	margin-bottom: 20upx;
}
.money_left ,.money_right{
	flex: 1;
}
.fui_block {
	height: 140upx;
	display: flex;
}
.fui_block_one {
	box-sizing: border-box;
	margin-top: 20upx;
	margin-left: 20upx;
	flex: 30%;
}
.fui_block_3 {
	border-bottom: 1upx solid #eee;
}
.fui_block_one .iconfont {
	color: #FF0000;
	margin-top: 40upx;
	font-size: 65upx;
}
.fui_block .fui_block_one .addwidth {
	font-size: 80upx;
	line-height: 120upx;
	color: #007AFF;
	opacity: 0.5;
}
.details {
	line-height: 100upx;
}
.yellow {
	color: #FEB312;
}
.lightgray {
	color: #999;
}
.uni-navigate-right .iconfont {
	color: orange;
}
.fui_block_one .fui_block_one_getnow {
	color: rgb(254, 162, 63);
}
.fui_block_one .team {
	color: #FFB400;
	margin-left: 5upx;
}
.fui_block_1 {
	border-bottom: 1upx solid #eee;
}
.color_aaa {
color:#aaa;
}
.color_f55 {
	color:#f55;
}
.linecontain {
	margin-bottom:20upx;
}
.linetotle {
	background-color:#FFFFFF;
}
.treatment text {
	flex:1;
	text-align:center;
	background-color:#FFFFFF;
}

.treatment {
	height:100upx;
	line-height:100upx;
	display:flex;
	justify-content:space-between;
	margin-bottom:20upx;
}
.coinlist {
	background:#fff;
	margin-top:20upx;
	padding:20upx 0;
}
.coinlist .webkit {
	width:50%;
	float:left;
	padding:20upx 24upx;
	box-sizing:border-box;
}
.coinlist .webkit:nth-child(2n + 1) {
	border-right:1px solid #eaeaea;
}
.coinlist .webkit image {
	width:72upx;
	height:72upx;
	margin-right:20upx;
	margin-top:6upx;
}
.coinlist .webkit view text {
	display:block;
	font-size:24upx;
}
.coinlist .webkit view .num {
	color:#feb312;
}
.yqm {
	padding:32upx 24upx;
	background:#fff;
}
.yqm image {
	width:50upx;
	height:50upx;
	display:block;
	margin-right:10upx;
}
.yqm text {
	display:block;
}
.headinfo {
	background-image: linear-gradient(to bottom right, rgb(170, 170, 255), rgb(170, 255, 255,0.5));
}
.headinfo .userinfo {
	min-height:260upx;
	padding:12upx 24upx;
	/* border-bottom:2upx solid #FEA23D; */
	position:relative;
}
.headinfo .userinfo .cont {
	padding:0;
	padding-top:20upx;
	padding-bottom:20upx;
}
.headinfo .userinfo .cont .face {
	width:120upx;
	height:120upx;
	border-radius:50%;
	margin-top:12upx;
	margin-right:30upx;
}
.headinfo .userinfo .cont .info {
	line-height:initial;
}
.headinfo .userinfo .cont .info text {
	display:block;
	margin-top:10upx;
}
.headinfo .userinfo .cont .info .title {
	color:#fff;
	font-size:28upx;
	font-weight:bold;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	margin-top:10upx;
}
.headinfo .userinfo .cont .info .text {
	color:#fff;
	font-size:22upx;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}
.headinfo .userinfo .cont .info .subtitle {
	color:#fff;
	font-size:22upx;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	width:auto;
	display:inline-block;
	border:2upx solid #fff;
	border-radius:36upx;
	max-width:100%;
	padding:0 14upx;
}
.uni-list-cell.active {
	background:#f5f5f5;
}
.uni-list image {
	width:34upx;
	height:34upx;
}
.uni-list .text {
	position:absolute;
	left:84upx;
	font-size:26upx;
}
.uni-list {
	margin-top:20upx;
}
.uni-list:before,.uni-list:after {
	display:none;
}
.uni-list-cell:after {
	content:" ";
	position:absolute;
	left:0.5rem;
	right:0.5rem;
	bottom:-1px;
	height:1px;
	border-top:1px solid #ebebeb;
	color:#D9D9D9;
	-webkit-transform-origin:0 0;
	-ms-transform-origin:0 0;
	transform-origin:0 0;
	-webkit-transform:scaleY(0.5);
	-ms-transform:scaleY(0.5);
	transform:scaleY(0.5);
	background:none;
}
.uni-list-cell .right {
	font-size:24upx;
	color:#999;
	margin-right:20upx;
}
.uni-list .uni-list-cell:last-child:after {
	border:0;
}
.money_left {
	border-right: 1upx solid #eee;
} 
</style>